<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el和data的两种写法</title>
    <script type="application/javascript" src="../js/vue.js"></script>
</head>
<body>

<!--
el和data的两种写法:
    el:
    1.el的第一种写法(标签式):new Vue的时候配置el属性;
    2.el的第二种写法(挂载): 先创建人Vue对象,然后通过vm.$mount('#app')的方式,指定el的值

    data:
    1.data的第一种写法(对象式): 对象式写法更加灵活
    2.data的第二种写法(函数式): 更加灵活, 一般使用函数式,由Vue管理的函数一般不要写箭头函数,this就不再是Vue实例了
-->
<div id="app4">

</div>
<script type="application/javascript">
    Vue.config.productionTip = false    // 阻止vue在启动时生成生产提示

    const v = new Vue({
        // el: "#app4",     // el的第一种写法

        //  data的第二种写法(对象式写法):
        /*data: {
            name: "张三"
        }*/

        // data的第二种写法(组件使用):
        data: function () {
            return name = '张三'
        }
    })

    v.$mount('#root')   // el的第二种写法(挂载)
</script>
</body>
</html>
